<template>
	<view class="center">
		<view class="center_top" style="background: url(./static/header.jpg);"><view class="mask"></view></view>
		<view class="center_box_bg">
			<view class="profily">
				<view class="base">
					<view style="display: flex;align-items: center;">
						<u-avatar :src="avatar"></u-avatar>
						<text>{{ nickName }}</text>
					</view>
					<view style="display: flex;align-items: center;">
						<text style="margin-right:10upx;">微信通知</text>
						<u-switch v-model="acceptWxnotice" :loading="loading" @change="change"></u-switch>
					</view>
				</view>
				<view>我的服务类目</view>
				<view class="content">
					<view class="contentD">
						<view class="tags">
							<u-tag
								class="tag"
								v-for="(item, index) in serviceItem"
								:key="index"
								:index="index"
								:text="item.text"
								:show="true"
								:bg-color="item.bgcolor"
								:border-color="item.bordercolor"
								color="#ffffff"
								@click="tagclick"
							/>
						</view>
						<u-form-item label="服务区域" :label-width="150">
							<u-input v-model="showcitypickerinput" placeholder="选择服务区域" @click="showcitypicker = true" disabled="" class="uni-input-input" />
							<city-select v-model="showcitypicker" @city-change="cityChange"></city-select>
						</u-form-item>
						<u-form-item label="详细地址" :label-width="150" :required="true" prop="address">
							<u-input v-model="address" placeholder="请输入详细地址" />
						</u-form-item>
						<u-form :model="dform" ref="formD">
							<view class="submit"><u-button type="warning" ripple @click="submitD">修改服务信息</u-button></view>
						</u-form>
					</view>
				</view>
			</view>
		</view>

		<u-top-tips ref="uTips" style="top:0"></u-top-tips>
	</view>
</template>

<script>
import citySelect from '../common/u-city-select.vue';
import provinces from 'uview-ui/libs/util/province.js';
import citys from 'uview-ui/libs/util/city.js';
import areas from 'uview-ui/libs/util/area.js';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			showcitypickerinput: '',
			showcitypicker: false,
			loading: false,
			acceptWxnotice: true,
			province: '',
			city: '',
			district: '',
			address:'',
			serviceItem: [],
			dform: {},
			avatar: '',
			nickName: '',
			provinces:provinces,
			citys : citys,
			districts : areas,
		};
	},
	methods: {
		cityChange(e) {
			this.showcitypickerinput = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.province = e.province.value;
			this.city = e.city.value;
			this.district = e.area.value;
		},
		change(value) {
			//0:接收 1：不接受
			this.loading = true;
			let showmsg = '';
			let isopen = '';
			if (value) {
				isopen = '0';
				showmsg = '已打开接收微信通知';
			} else {
				isopen = '1';
				showmsg = '已关闭微信通知';
			}
			this.$u.get('/front/mer/setWxnotice/' + isopen, {}).then(res => {
				this.loading = false;
				if (res.code == 200) {
					this.$refs.uTips.show({
						title: showmsg,
						type: 'warning',
						duration: '2300'
					});
				} else {
					this.$refs.uTips.show({
						title: res.msg,
						type: 'warning',
						duration: '2300'
					});
				}
			});
		},
		getServiceTypes() {
			uni.request({
				url: 'http://www.mksoft.cn/zx/front/mer/getServiceTypes',
				success: res => {
					if (res.data.code == 200) {
						let arry = res.data.data;
						this.$u.get('/front/user/getUserInfo', {}).then(res => {
							if (res.code == 200) {
								this.avatar = res.data.avatar;
								this.nickName = res.data.nickName;
								this.acceptWxnotice = res.data.isopen == '0' ? true : false;
								this.province = res.data.province;
								this.city = res.data.city;
								this.district = res.data.district;
								this.address = res.data.address;
								this.calcaddress();
								if (res.data.status == 0) {
									//用户已经审核通过
									let tags = res.data.tags;
									let tagArray = [];
									if (tags) {
										tagArray = tags.split(',');
									}
									this.serviceItem = arry.map(function(item, index, arry) {
										let isSelected = false;
										let selectedColor = '#b0b0b0';
										if (tagArray && tagArray.indexOf(item.id + '') > -1) {
											isSelected = true;
											selectedColor = '#FA8513';
										}
										let o = {
											text: item.name,
											key: item.id,
											selected: isSelected,
											bgcolor: selectedColor,
											bordercolor: selectedColor
										};
										return o;
									});
								}
							}
						});
					}
				},
				fail: res => {}
			});
		},

		submitD() {
			let tags = '';
			this.serviceItem.forEach(item => {
				if (item.selected) {
					tags += item.key + ',';
				}
			});
			if (tags.length > 0) {
				tags = tags.substr(0, tags.length - 1);
			}
			this.$u
				.post('/front/mer/reg/updateMerInfo/4', {
					tags: tags,
					province: this.province,
					city:this.city,
					district:this.district,
					address:this.address
				})
				.then(res => {
					if (res.code == 200) {
						this.$refs.uTips.show({
							title: '修改成功',
							type: 'warning',
							duration: '2300'
						});
					}
				});
		},
		tagclick(index) {
			if (!this.serviceItem[index].selected) {
				// 选中
				this.serviceItem[index].selected = true;
				this.serviceItem[index].bgcolor = '#FA8513';
			} else {
				// 取消选中
				this.serviceItem[index].selected = false;
				this.serviceItem[index].bgcolor = '#b0b0b0';
			}
			if (this.serviceItem[index].bordercolor == '#b0b0b0') {
				this.serviceItem[index].bordercolor = '#FA8513';
			} else {
				this.serviceItem[index].bordercolor = '#b0b0b0';
			}
		},
		calcaddress() {
			let firstindex = 0;
			let secondindex = 0;
			let thirdindex = 0;
			if(this.province){
				for(let i =0;i<this.provinces.length;i++){
					if(this.province == this.provinces[i].value){
						firstindex = i;
						this.showcitypickerinput = this.provinces[i].label
					}
				}
			}
			console.log(this.citys[firstindex],"this.citys[firstindex]");
			if(this.city){
				for(let j =0;j<this.citys[firstindex].length;j++){
					if(this.city == this.citys[firstindex][j].value){
						this.showcitypickerinput += '-' + this.citys[firstindex][j].label;
						secondindex = j;
					}
				}
			}
			if(this.district){
				for(let h =0;h<this.districts[firstindex][secondindex].length;h++){
					if(this.district == this.districts[firstindex][secondindex][h].value){
						this.showcitypickerinput += '-' + this.districts[firstindex][secondindex][h].label
					}
				}
			}
			
		}
	},
	computed: {
		 
	},
	onLoad() {
		// 查询所有服务分类
		this.$u.get('/front/user/getUserInfo', {}).then(res => {
			if (res.code == 200) {
				let bsuser = res.data;
				if (bsuser.status == '1') {
					this.$Router.push({ path: '/pages/userEnter/regSuccess', query: { status: '1' } });
				} else if (bsuser.status == '3') {
					this.$Router.push({ path: '/pages/userEnter/regSuccess', query: { status: '3' } });
				} else if (bsuser.status == '4') {
					this.$Router.push({ path: '/pages/userEnter/regSuccess', query: { status: '4' } });
				} else if (bsuser.status == '0') {
					//this.$Router.push({ path: '/pages/userEnter/updateServiceCate', query: { status: '4' }})
				}
				// 查询所有服务分类
				this.getServiceTypes();
			}
		});
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}

.profily,
.profily_header {
	border-radius: 8px;
}

.center {
	height: 100%;

	&_top {
		height: 18%;
		background-size: cover;

		// background: #E6E6E6;
		.mask {
			background: rgba(0, 0, 0, 0.4);
			height: 100%;
		}
	}

	&_box_bg {
		background: #f9f9f9;
		position: relative;

		.profily {
			position: absolute;
			width: 90%;
			// border:1px solid #F7F7F7;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #fefefe;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 0px 2px 5px #ededed;
		}
	}
}

.base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid #f6f6f6;
	padding-bottom: 35upx;
	position: relative;
	.profily_header {
		height: 120upx;
		width: 120upx;

		background-size: 100%;
	}

	text {
		margin-left: 20px;
		font-size: 30upx;
	}

	image {
		position: absolute;
		height: 40upx;
		width: 40upx;
		right: 0px;
		top: 0px;
	}
}

.order_status {
	display: flex;
	justify-content: space-between;
	margin-top: 35upx;

	.status {
		width: 140upx;
		font-size: 24upx;
		text-align: center;
		letter-spacing: 0.5px;
		display: flex;
		flex-direction: column;
		.icon {
			width: 50upx;
			height: 50upx;
			margin: 0 auto;
			margin-bottom: 5px;
		}
	}
}

.baiban {
	background: #fefefe;
	height: 300upx;
}

.center_menu {
	width: 100%;
	display: inline-block;

	.menu_item {
		font-size: 28upx;
		letter-spacing: 1px;
		padding: 14px 5%;
		background: #fefefe;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1px solid #efefef;

		&:hover {
			background: #f6f6f6 !important;
		}

		&::after {
			content: '';
			width: 30upx;
			height: 30upx;
			position: absolute;
			right: 5%;
			background: url('/static/right.png') no-repeat;
			background-size: 100%;
		}

		text:nth-of-type(1) {
			margin-left: 10px;
		}

		image {
			width: 40upx;
			height: 40upx;
		}

		&:nth-of-type(4) {
			margin-top: 10px;
		}
	}
}
.content {
	padding: 25upx;
	.contentA {
		.ysxy {
			margin-top: 15upx;
			display: flex;
			justify-content: center;
		}
	}
	.contentD {
		.tags {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.tag {
				margin-left: 5upx;
				margin-top: 5upx;
			}
		}
	}
	.submit {
		margin-top: 40upx;
	}
}
</style>
